import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./me"
// 引入api
import { reqBanner } from "../../request/api";
// 引入css样式
import "./me.css"

import { Carousel, WingBlank } from 'antd-mobile';

export default function Me() {
    const [state, dispatch] = useReducer(reducer, initState);
    //相当于生命周期
    useEffect(() => {
        reqBanner().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeBanner(res.data.list))
            }
        })
    }, []);
    return (
        <div className="me">
            <div className="top">
                <h3>我的</h3>
            </div>
            <header>
                <div className="zuo">
                    <img src="" alt="" />
                    <div>
                        <div className="shang">代用名</div>
                        <div className="xia">完善资料让小U更懂您</div>
                    </div>
                </div>
                <div className="you">
                    <img src="" alt="" />
            每日签到
                    </div>
            </header>
            <ul className="shoucang">
                <li>
                    <p>12</p>
                    <p>我的收藏</p>
                </li>
                <li>
                    <p>12</p>
                    <p>浏览记录</p>
                </li>
                <li>
                    <p>
                        <span className="xiao">￥</span>
                        <span>0</span>
                    </p>
                    <p>我的红包</p>
                </li>
                <li>
                    <p>12</p>
                    <p>优惠券</p>
                </li>
            </ul>
            <div className="dingdan">
                <div className="top">
                    <p>我的订单</p>
                    <p>全部订单&nbsp;&nbsp;</p>
                </div>
                <ul>
                    <li>
                        <img src="" alt="" />
                        <p>待付款</p>
                    </li>
                    <li>
                        <img src="" alt="" />
                        <p>待收货</p>
                    </li>
                    <li>
                        <img src="" alt="" />
                        <p>评价</p>
                    </li>
                    <li>
                        <img src="" alt="" />
                        <p>售后/退款</p>
                    </li>
                </ul>
            </div>
            <div className="banner">
                <WingBlank>
                    <Carousel
                        autoplay={true}
                    >
                        {state.banner.map(item => (
                            <img
                                key={item.id}
                                src={item.img}
                                alt=""
                            />
                        ))}
                    </Carousel>
                </WingBlank>
            </div>
            <ul className="content">
                <li>
                    <div className="zuo">
                        <img src="" alt="" />
                        <p>地址管理</p>
                    </div>
                    <div className="you">
                        <img src="" alt="" />
                    </div>
                </li>
                <li>
                    <div className="zuo">
                        <img src="" alt="" />
                        <p>我的钱包</p>
                    </div>
                    <div className="you">
                        <p>剩余200U币</p>
                        <img src="" alt="" />
                    </div>
                </li>
                <li>
                    <div className="zuo">
                        <img src="" alt="" />
                        <p>我的二维码</p>
                    </div>
                    <div className="you">
                        <img src="" alt="" />
                    </div>
                </li>
                <li>
                    <div className="zuo">
                        <img src="" alt="" />
                        <p>我的小伙伴</p>
                    </div>
                    <div className="you">
                        <img src="" alt="" />
                    </div>
                </li>
                <li>
                    <div className="zuo">
                        <img src="" alt="" />
                        <p>0元试用</p>
                    </div>
                    <div className="you">
                        <img src="" alt="" />
                    </div>
                </li>
            </ul>
        </div>
    )
}
